{% load text_filters %}
<article class="block profile-card h-card">
    <div class="profile-card-photo u-photo">
        <div class="avatar profile-user-avatar"><img src="{{ user.get_avatar }}" alt="Аватар {{ user.full_name }}" loading="lazy" /></div>

        {% if me and user != me %}
            <friend-button
                url="{% url "api_friend" user.slug %}"
                :is-friend-by-default="{% if user.id in friends_ids %}true{% else %}false{% endif %}">
            </friend-button>
        {% endif %}
    </div>

    <div class="profile-card-info">
        <a href="{% url "profile" user.slug %}" class="profile-user-name u-url">
            <span class="profile-user-fullname {% if not user.is_member %}user-name-is-banned{% endif %} p-name">{{ user.full_name }}</span>
            <span class="profile-user-nickname p-nickname">@{{ user.slug }}</span>
        </a>

        {% if user.position or user.company %}
            <div class="profile-user-job">
                <span class="profile-user-job-position p-job-title">{{ user.position }}</span>
                {% if user.company %}— <span class="profile-user-job-company p-org">{{ user.company }}</span>{% endif %}
            </div>
        {% endif %}

        {% if user.city or user.country %}
            <div class="profile-user-location">
                📍{% if user.city %}<span class="p-locality">{{ user.city }}</span>, {% endif %}<span class="p-country-name">{{ user.country }}</span>
            </div>
        {% endif %}

        {% if user.hat %}
            <div class="profile-user-hat">
                {% include "users/widgets/hat.html" with hat=user.hat %}
            </div>
        {% endif %}

        {% if user.bio %}
            <div class="profile-user-bio">
                {{ user.bio | markdown_without_mentions }}
            </div>
        {% endif %}
    </div>
</article>
